SPA_RESOLVE_INIT = function(transition) { 
	console.log(transition);
	Object.prototype.hasClass = function(cls) {
	    return this.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
	};
	 
	Object.prototype.addClass = function(cls) {
	    if (!this.hasClass(cls)) this.className += " " + cls;
	};
	 
	Object.prototype.removeClass = function(cls) {
	    if (this.hasClass(cls)) {
	        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
	        this.className = this.className.replace(reg, ' ');
	    }
	};
	 
	Object.prototype.toggleClass = function(cls){
	    if(this.hasClass(cls)){
	        this.removeClass(cls);
	    }else{
	        this.addClass(cls);
	    };
	}

	var 
	 	topPic = document.getElementById("top-pic"),
	    bottomPic = document.getElementById("bottom-pic");
	    imgDiffNum = 0,
        imgFindNum = 0;
   
	var game = {
		imgRender:function(){
			var 
			 	topPic = document.getElementById("top-pic"),
		        bottomPic = document.getElementById("bottom-pic"),
                missbox = document.getElementById("missbox"),
                miss = document.getElementById("miss");

			topPic.innerHTML = "<img src='../img/"+transition.query.index+"_a.png'><b class='pic-layer' id='top-pic-layer'></b>";
			bottomPic.innerHTML = "<img src='../img/"+transition.query.index+"_b.png'><b class='pic-layer' id='bottom-pic-layer'></b>";

			var 
				topPicLayer = document.getElementById("top-pic-layer"),
                bottomPicLayer = document.getElementById("bottom-pic-layer");

            topPicLayer.onclick = bottomPicLayer.onclick = function(e){
                var 
					e = e || window.event;
				missbox.addClass("show"); 
				miss.addClass("ani");
				miss.style.left = e.clientX - miss.offsetWidth/2 + "px";
				miss.style.top = e.clientY - miss.offsetHeight/2 -36 + "px";
				setTimeout(function(){
					missbox.removeClass("show");
					miss.removeClass("ani");
				},3000);
            };

             for(var i = 0 ; i<imgData.imgInfo[transition.query.index].pos.length ; i++){
                var diff = document.createElement("div"),
                    diffClone = null;
                diff.className = "diff";
                diff.setAttribute("index",i);
                diff.style["left"] = imgData.imgInfo[transition.query.index].pos[i].x + "px";
                diff.style["top"] = imgData.imgInfo[transition.query.index].pos[i].y + "px";
                
                diffClone = diff.cloneNode(true);
                topPic.appendChild(diff);
                bottomPic.appendChild(diffClone);
                diffClone.onclick = diff.onclick = function(e){
                    var diffEle = scene.getElementsByTagName("div"),
                        thisIndex = this.getAttribute("index"),
                        e = e || event ;
                    for(var i = 0 ; i < diffEle.length ; i++){
                        if(diffEle[i].getAttribute("index") === thisIndex){
                            if(diffEle[i].className !== "diff selected"){
                                imgDiffNum++;
                                // diffFindNum.innerHTML = imgDiffNum/2;
                                diffEle[i].className += " selected"
                            }   
                        }
                    }

                    //如果找到的diff和数据中数组不同个数相等则说明当前图找完
                    if(imgDiffNum == imgData.imgInfo[transition.query.index].pos.length*2){
                        if(imgData.imgInfo.length === transition.query.index){ // game pass
                          console.log("恭喜完成全部挑战");
                        }
                        else{  // next pic
                           console.log("完成本轮挑战并积分")
                        }   
                    }
                    e.cancelBubble = true;
                }
            }
		}
	};
	game.imgRender();
}